<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.red{
				width: 50px;
				line-height: 50px;
				border-radius: 50%;
				background: linear-gradient(to right,#ff9569 0%,#e92758 100%);
				text-align: center;
				margin: 5px 5px;
				display: inline-block;
			}
			
			.blue{
				width: 50px;
				line-height: 50px;
				border-radius: 50%;
				background: linear-gradient(-90deg,#29bdd9 0%,#276ace 100%);
				text-align: center;
				margin: 5px 5px;
				display: inline-block;
			}
		</style>
	</head>
	<body id="bd">
		<button id="but">抽奖</button>
		<script type="text/javascript">
			but.onclick=function(){
				var num=prompt("请输入您想买几注");
				for(var k=0;k<num;k++){
					var father=document.createElement("div");
				father.className="father";
				bd.appendChild(father);
				//定义一个数组来接住随机数
				var arr=[];
				while(arr.length<6){
					var r=parseInt(Math.random()*(33)+1);
					if(arr.indexOf(r)==-1){
						arr.push(r);
					}
				}
				arr.sort(function(a,b){
					return a-b;
				})
				
				for(var i=1;i<arr.length;i++){
					var div_red=document.createElement("div");
					div_red.className="red";
					div_red.innerHTML=arr[i];
					father.appendChild(div_red);
				}
				
				var blue=parseInt(Math.random()*(16)+1);
				var div_blue=document.createElement("div");
				div_blue.className="blue";
				div_blue.innerHTML=blue;
				father.appendChild(div_blue);
				}
			}
			
		</script>
	</body>
</html>
